<template>
  <div>
    <h1>这是根组件App.vue</h1>
    <a href="#/home">Home</a>&nbsp;
    <a href="#/movie">Movie</a>&nbsp;
    <a href="#/about">About</a>

    <component :is="comName"></component>
  </div>
</template>

<script>
import MyAbout from './MyAbout.vue'
import MyHome from './MyHome.vue'
import MyMovie from './MyMovie.vue'
export default {
    name:'MyApp',
    data(){
        return{
            comName:'MyHome'
        }
    },
    components:{
        MyAbout,
        MyHome,
        MyMovie
    },
    created(){
        window.onhashchange=()=>{
            switch(location.hash){
                case '#/home':
                    this.comName='MyHome'
                    break
                    case '#/about':
                        this.comName='MyAbout'
                        break
                        case '#/movie':
                            this.comName='MyMovie'
                            break
            }
        }
    }

}
</script>

<style>

</style>